<template>
  <section>
    <BaseSlot ref="view" :globalLoading="globalLoading">
      <template slot="table">
        <el-row type="flex" justify="space-between" :gutter="20">
          <el-col :span="12">
            <Cycle :cycleData="cycleData1" @cycleChange="cycleChange1" />
          </el-col>
          <el-col :span="12">
            <Cycle :cycleData="cycleData2" @cycleChange="cycleChange2" />
          </el-col>
        </el-row>
        <el-row class="mr_vertical_10">
          <TradeCompare :TradeData1="TradeData1" :TradeData2="TradeData2" />
        </el-row>
        <el-row class="mr_vertical_10">
          <TrendCompare :trendData1="trendData1" :trendData2="trendData2" />
        </el-row>
        <el-row class="mr_vertical_10">
          <el-col>
            <ProportionCompare :proportion1="proportion1" :proportion2="proportion2" />
          </el-col>
        </el-row>
        <el-row class="mr_vertical_10">
          <el-col>
            <TransactionInfor :orders1="orders1" :orders2="orders2" />
          </el-col>
        </el-row>
      </template>
      <!-- <template slot="popup-title">
        <h2>{{ popupTitle }}</h2>
      </template>
      <template slot="popup-body">
        <component
          ref="coreCpt"
          :is="coreCpt"
          :popupTitle="popupTitle"
          :coreData="coreData"
          :isView="isView"
          :isEdit="isEdit"
          @submit="submitTask"
          @close="closeCpt"
        />

      </template>-->
    </BaseSlot>
    <el-dialog
      :title="dlgTitle"
      :visible.sync="dlgVib"
      @closed="closeDlg"
      append-to-body
      width="60%"
    >
      <component
        ref="dlgCpt"
        :is="dlgCpt"
        :data="dlgData"
        :type="dlgCptType"
        :action="action"
        :categoryType="categoryType"
        :choice="action == 'search'"
        :selected="selected"
        @selected="selectedf"
        @close="dlgVib = false"
        @locale="locale"
        @refresh="init"
      />
      <el-row type="flex" justify="center">
        <el-button
          size="small"
          type="primary"
          @click="
            () => {
              $refs.dlgCpt.submit();
            }
          "
        >确定</el-button>
        <el-button size="small" @click="dlgVib = false">关闭</el-button>
      </el-row>
    </el-dialog>
  </section>
</template>
<script lang='ts'>
import { Vue, Component, Watch } from "vue-property-decorator";
import BaseSlot from "@/components/BaseSlot.vue";
import Constant from "@/lib/Constant";

import Situation from "./common/situation.vue";
import Station from "./common/station.vue";
import TradeInfo from "./common/TradeInfo.vue";
import Trend from "./common/trend.vue";
import Proportion from "./common/proportion.vue";
import Price from "./common/price.vue";
import ElectricityTrading from "./common/electricityTrading.vue";
import CurrInformation from "./common/currInformation.vue";
import Cycle from "./dataCompares/cycle.vue";

import TradeCompare from "./dataCompares/tradeCompare.vue";
import TrendCompare from "./dataCompares/trendCompare.vue";
import ProportionCompare from "./dataCompares/proportionCompare.vue";
import TransactionInfor from "./dataCompares/transactionInfor.vue";

@Component({
  components: {
    BaseSlot,
    Cycle,
    TradeCompare,
    Situation,
    Station,
    TradeInfo,
    Trend,
    Proportion,
    Price,
    ElectricityTrading,
    CurrInformation,
    TrendCompare,
    ProportionCompare,
    TransactionInfor
  }
})
export default class MyApplication extends Vue {
  protected cycleData1: any = {
    name: "交易周期1",
    option: []
  };
  protected cycleData2: any = {
    name: "交易周期2",
    option: []
  };
  protected options: any = [];
  protected tpno1: any = null;
  protected tpno2: any = null;
  protected TradeData1: any = null;
  protected TradeData2: any = null;
  protected trendData1: any = null;
  protected trendData2: any = null;
  protected proportion1: any = {
    p2p_total_qty: 0,
    central_total_qty: 0
  };
  protected proportion2: any = {
    p2p_total_qty: 0,
    central_total_qty: 0
  };
  protected ordersList1: any = {};
  protected ordersList2: any = {};
  protected orders1: any = {
    len: 0,
    nameData: [],
    links: []
  };
  protected orders2: any = {
    len: 0,
    nameData: [],
    links: []
  };

  protected created() {
    this.init();
  }
  protected async init() {
    try {
      const params: any = {
        page_no: 1,
        page_size: 1000
      };
      const res: any = await this.$api
        .getTradePeriodsQuery(params)
        .then((response: any) => {
          this.$nextTick(() => {
            this.options = response.data.trade_periods.map(
              (item: any, idx: number) => {
                return {
                  item,
                  tpno: item.tpno,
                  starttime: item.starttime,
                  endtime: item.endtime,
                  name: `${item.tpno}  ${Vue.prototype.$fmtDate(
                    item.starttime
                  )}  ${Vue.prototype.$fmtDate(item.endtime)}`
                };
              }
            );
            this.$set(this.cycleData1, "option", this.options);
            this.$set(this.cycleData2, "option", this.options);
          });
        });
    } catch (error) {
      console.log(error);
    }
  }

  protected async cycleChange1(tpno: any) {
    if (tpno) {
      const params: any = {
        tpno
      };
      await this.$api.getTradePeriodsGet(params).then((response: any) => {
        this.$set(this, "TradeData1", response.data);
      });

      const trendParams: any = {
        tpno
      };
      await this.$api.getOrdersStat(trendParams).then((response: any) => {
        if (response.data.p2p && response.data.central) {
          this.$set(
            this.proportion1,
            "p2p_total_qty",
            response.data.p2p.total_qty
          );
          this.$set(
            this.proportion1,
            "central_total_qty",
            response.data.central.total_qty
          );
        }

        if (response.data.periods) {
          this.$set(this, "trendData1", response.data.periods);
          this.trendData1.total_qty = this.trendData1.map((item: any) => {
            return item.total_qty;
          });
          this.trendData1.time = this.trendData1.map((item: any) => {
            return item.time;
          });
        }
      });

      await this.$api.getOrdersQuery(params).then((response: any) => {
        const {
          data: {
            Orders,
            paginator: { page_no, page_size, total_count }
          }
        } = response;

        const nameData: any = [];
        const links: any = [];
        if (Orders.length) {
          const obj: any = {};
          Orders.forEach((el: any) => {
            const p = "priceYuan";
            el[p] = Vue.prototype.$coinToYuan(el.price);
            const { buyer_did, saler_did, quantity } = el;
            if (!obj[buyer_did]) {
              obj[buyer_did] = null;
            }
            links.push({
              source: buyer_did,
              target: saler_did,
              value: quantity
            });
          });

          for (const key in obj) {
            if (obj.hasOwnProperty(key)) {
              nameData.push({
                name: key
              });
            }
          }
          this.$set(this.orders1, "len", Orders.length);
          this.$set(this.orders1, "nameData", nameData);
          this.$set(this.orders1, "links", links);
        }
      });
    } else {
      this.$set(this, "TradeData1", null);
      this.$set(this, "trendData1", null);
      this.$set(this.proportion1, "p2p_total_qty", 0);
      this.$set(this.proportion1, "central_total_qty", 0);

      this.orders1 = {
        len: null,
        nameData: null,
        links: null
      };
    }
  }
  protected async cycleChange2(tpno: any) {
    if (tpno) {
      const params: any = {
        tpno
      };
      await this.$api.getTradePeriodsGet(params).then((response: any) => {
        this.$set(this, "TradeData2", response.data);
      });

      const trendParams: any = { tpno };
      await this.$api.getOrdersStat(trendParams).then((response: any) => {
        if (response.data.p2p && response.data.central) {
          this.$set(
            this.proportion2,
            "p2p_total_qty",
            response.data.p2p.total_qty
          );
          this.$set(
            this.proportion2,
            "central_total_qty",
            response.data.central.total_qty
          );
        }
        if (response.data.periods) {
          this.$set(this, "trendData2", response.data.periods);

          this.trendData2.total_qty = this.trendData2.map((item: any) => {
            return item.total_qty;
          });
          this.trendData2.time = this.trendData2.map((item: any) => {
            return item.time;
          });
        }
      });

      await this.$api.getOrdersQuery(params).then((response: any) => {
        const {
          data: {
            Orders,
            paginator: { page_no, page_size, total_count }
          }
        } = response;

        const nameData: any = [];
        const links: any = [];
        if (Orders.length) {
          const obj: any = {};
          Orders.forEach((el: any) => {
            const p = "priceYuan";
            el[p] = Vue.prototype.$coinToYuan(el.price);
            const { buyer_did, saler_did, quantity } = el;
            if (!obj[buyer_did]) {
              obj[buyer_did] = null;
            }
            links.push({
              source: buyer_did,
              target: saler_did,
              value: quantity
            });
          });

          for (const key in obj) {
            if (obj.hasOwnProperty(key)) {
              nameData.push({
                name: key
              });
            }
          }
          this.$set(this.orders2, "len", Orders.length);
          this.$set(this.orders2, "nameData", nameData);
          this.$set(this.orders2, "links", links);
        }
      });
    } else {
      this.$set(this, "TradeData2", null);
      this.$set(this, "trendData2", null);
      this.$set(this.proportion2, "p2p_total_qty", 0);
      this.$set(this.proportion2, "central_total_qty", 0);

      this.orders2 = {
        len: null,
        nameData: null,
        links: null
      };
    }
  }

  protected async getSituationData(tpno: any) {
    try {
      const params: any = {
        tpno
      };
      await this.$api.getTradePeriodsGet(params).then((response: any) => {
        this.$set(this, "situationData", response.data);
      });
    } catch (error) {
    } finally {
    }
  }
}
</script>

<style lang="scss" scoped>
.mr_vertical_10 {
  margin: 10px 0;
}
.mr_w_10 {
  margin: 0 10px;
}
.margin-right {
  margin-right: 30px;
}
</style>


